<template>
  <div>
    <el-row>
      <!--左5-->
      <el-col :span="8">
        <div class="leftBar">
          <img src="../assets/itservices-top.png" alt=""><span style="margin-left:10px;font-weight: 700; font-size: 26px;color:white;">IT服务平台</span>
        </div>
      </el-col>
      <el-col :span="16">
        <nav class="navbar">
          <div v-for="item in navItems" :key="item.name">
            <router-link :to="item.route">{{ item.name }}</router-link>
          </div>
        </nav>
      </el-col>

    </el-row>

  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      navItems: [
        { name: 'Home', route: '/' },
        { name: 'Why Choose Us', route: '/WhyChooseUs' },
        { name: 'Our Services', route: '/OurServices' },
        { name: 'Industries', route: '/Industries' },
        { name: 'Tools Tips', route: '/ToolsTips' },
        { name: 'Contact Us', route: '/ContactUs' },
        { name: 'About', route: '/about' },
      ],
    };
  },
};
</script>

<style scoped>

  /*整体*/
  .topBar {
    background-image: url("../assets/images/menu/menu-bg-new.png") !important;
    background-repeat: repeat-x;
    background-size: 100% 100%;
    box-shadow: 0 5px 15px 0;
    height: 70px;
  }
  /*左侧*/
  .leftBar {
    height: 70px;
    display: flex;
    padding: 10px;
  }

  /*中间菜单整体*/
  .navbar {
    background-image: url("../assets/images/menu/menu-bg-new.png") !important;
    background-repeat: repeat-x;
    height: 70px;
    overflow: hidden;
  }
/*  nav {
    overflow: hidden;
  }*/

  nav div {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
  }

  nav div a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }

    nav div a:hover {
      background-image: url("../assets/images/menu/menu-active-bg-new.png") !important;
      /*      background-color: #ddd;*/
      /*      color: black;*/
    }
  /*没有底边*/
  /*.nav.nav--horizontal {
    border-bottom: none;
  }*/

  /*单个菜单*/
  /*.nav--horizontal > .nav-item {
    height: 70px;
    line-height: 70px;
  }*/

  /*选中菜单样式*/
  /*.nav--horizontal > .nav-item.is-active {
    background-image: url("../assets/images/menu/menu-active-bg-new.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    border-bottom: 3px solid #1c6cb8;
  }*/

  /*覆盖原样式*/
  /*.nav-item.is-active {
    border-bottom-color: #1c6cb8 !important;
  }*/

  /*鼠标悬停样式*/
  /*.nav--horizontal > .nav-item:not(.is-disabled):hover, .navbar--horizontal > .nav-item:not(.is-disabled):focus {
    background-color: #1a62bf;
    background-image: url("../assets/images/menu/menu-active-bg-new.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    height: 70px;
  }*/
</style>
